{% extends "base.html" %}

{% block title %}{% if template %}编辑模板{% else %}创建模板{% endif %}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title mb-0">{% if template %}编辑模板{% else %}创建模板{% endif %}</h4>
                    <div>
                        <a href="{{ url_for('message.message_templates') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-times"></i> 取消
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <form method="POST" id="template-form">
                        {{ form.hidden_tag() }}
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    {{ form.name.label(class="form-control-label") }}
                                    {{ form.name(class="form-control") }}
                                    {% if form.name.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.name.errors %}
                                        <span>{{ error }}</span>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    {{ form.message_type.label(class="form-control-label") }}
                                    {{ form.message_type(class="form-control") }}
                                    {% if form.message_type.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.message_type.errors %}
                                        <span>{{ error }}</span>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    {{ form.priority.label(class="form-control-label") }}
                                    {{ form.priority(class="form-control") }}
                                    {% if form.priority.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.priority.errors %}
                                        <span>{{ error }}</span>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    {{ form.title_template.label(class="form-control-label") }}
                                    {{ form.title_template(class="form-control") }}
                                    <small class="form-text text-muted">
                                        可使用变量: {customer_name}, {employee_name}, {department}, {date} 等
                                    </small>
                                    {% if form.title_template.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.title_template.errors %}
                                        <span>{{ error }}</span>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            {{ form.content_template.label(class="form-control-label") }}
                            {{ form.content_template(class="form-control", rows="8") }}
                            <small class="form-text text-muted">
                                可使用变量: {customer_name}, {employee_name}, {department}, {date}, {customer_id} 等
                            </small>
                            {% if form.content_template.errors %}
                            <div class="invalid-feedback d-block">
                                {% for error in form.content_template.errors %}
                                <span>{{ error }}</span>
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    {{ form.recipient_type.label(class="form-control-label") }}
                                    {{ form.recipient_type(class="form-control") }}
                                    {% if form.recipient_type.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.recipient_type.errors %}
                                        <span>{{ error }}</span>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    {{ form.is_active.label(class="form-control-label") }}
                                    <div class="form-check">
                                        {{ form.is_active(class="form-check-input") }}
                                        {{ form.is_active.label(class="form-check-label") }}
                                    </div>
                                    {% if form.is_active.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.is_active.errors %}
                                        <span>{{ error }}</span>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> {% if template %}更新模板{% else %}创建模板{% endif %}
                            </button>
            <button type="reset" class="btn btn-outline-secondary ml-2">
                <i class="fas fa-redo"></i> 重置
            </button>
            {% if template %}
            <a href="{{ url_for('message.send_from_template', template_id=template.id) }}" 
               class="btn btn-success ml-2">
                <i class="fas fa-paper-plane"></i> 使用此模板发送消息
            </a>
            {% endif %}
        </div>
    </form>
</div>
</div>
</div>
</div>

<!-- 变量参考 -->
<div class="card mt-3">
    <div class="card-header">
        <h6 class="card-title mb-0">可用变量参考</h6>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <h6>客户相关</h6>
                <ul>
                    <li><code>{customer_name}</code> - 客户名称</li>
                    <li><code>{customer_id}</code> - 客户ID</li>
                    <li><code>{customer_code}</code> - 客户编号</li>
                    <li><code>{customer_type}</code> - 客户类型</li>
                    <li><code>{contact_person}</code> - 联系人</li>
                    <li><code>{phone}</code> - 电话</li>
                </ul>
            </div>
            <div class="col-md-6">
                <h6>员工相关</h6>
                <ul>
                    <li><code>{employee_name}</code> - 员工姓名</li>
                    <li><code>{employee_id}</code> - 员工ID</li>
                    <li><code>{department}</code> - 部门</li>
                    <li><code>{position}</code> - 职位</li>
                </ul>
                
                <h6>系统相关</h6>
                <ul>
                    <li><code>{date}</code> - 当前日期</li>
                    <li><code>{time}</code> - 当前时间</li>
                    <li><code>{datetime}</code> - 当前日期时间</li>
                </ul>
            </div>
        </div>
    </div>
</div>
</div>
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    // 表单验证
    $('#template-form').submit(function(e) {
        var titleTemplate = $('#title_template').val().trim();
        var contentTemplate = $('#content_template').val().trim();
        
        if (!titleTemplate || !contentTemplate) {
            e.preventDefault();
            alert('标题模板和内容模板不能为空');
            return false;
        }
    });
});
</script>
{% endblock %}